<!DOCTYPE html>
<!-- <html lang="zh"> -->
  <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible' content='ie=edge,chrome=1">
  <meta name="format-detection" content="telephone=no>
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 
  <link rel="stylesheet" href="./css/index.css?ver=1.0">
  <link rel="stylesheet" href="./css/style.css?ver=1.0">
  <link  type="text/css" rel="stylesheet" href="./css/styl.css?ver=1.0">
  <link  type="text/css" rel="stylesheet" href="./css/csshake.min.css?ver=1.0">
  <link type="text/css" rel="stylesheet" href="./css/default.css">
  <link rel="icon" href="./img/fz.png">
  <title>🧨🧨🎁</title>
</head>

<body>

  <div class="index">
    <div class="lantern"></div>
    <div class="time">
      <span class="user"></span>爱范丞丞已经
      <span class="days">--</span> :
      <span class="hour">--</span> :
      <span class="min">--</span> :
      <span class="second">--</span>
    </div>
    <div class="text"></div>
    <div class="fence">
      <div class="p1"></div>
      <div class="p4">自定义</div>
      <div class="p2">看烟花</div>
      <div class="p5">红包</div>
      <div class="p3"></div>
    </div>
  </div>

  <div class="fire">
    <canvas></canvas>
  </div>

  <div class="container right-panel-active" id="zidingyi" style="display: none;">
    	
			<div class="container__form container--signup">
				<form action="#" class="form" id="form1">
					<h2 class="form__title">用户名/微博id</h2>
					<input type="text" id="username" placeholder="输入用户名" class="input" />
          <h2 class="form__title">入坑时间</h2>
	
					<input type="date"  id="time"  placeholder="年/月/日" class="input" >
					<button class="btnn" id="add">提交</button>
				</form>
			</div>
		


			<div class="container__form container--signin">
				<form action="#" class="form" id="form2">
					<h2 class="form__title">开启</h2>
				
					<button class="btn3" >进入新年表白墙</button>
				</form>
			</div>


			<div class="container__overlay">
				<div class="overlay">
					<div class="overlay__panel overlay--left">
						<button class="btnn" id="signIn">点击按钮开启新年表白墙</button>
					</div>
					<div class="overlay__panel overlay--right">
						<button class="btnn" id="signUp">用户名/微博id</button>
					</div>
				</div>
			</div>
  </div>

    <div  class='hb' id="main" style="display: none;width: 60%; padding-top: 100%; margin:20px 20%; position: relative;">
      <span style="background-image: url(./img/red-w.png);width: 100%; height: 100%; background-size: 100%; background-position: center; background-repeat: no-repeat; top: 0; left: 0; position: absolute;">
      </span>
     <button id='hovertreeOpen' class="hbbutton" type="领取红包" style="position: absolute; top: 38%; left: 30%; font-size: 14px; width: 40%; height: 24%; border-radius: 100%; background: #fdc339; color: #fff;">
      拆红包</button>
      <div class='hbtext' style="display: none; position:absolute; top: 40%; text-align: center; padding: 10px;">
          <h1 id="hwqKey" style="font-size: 30px; color: #ffc000; line-height: 40px;text-align: center;">恭喜您！</h1>
          <h5 id="hwqValue" style="color: #fff;font-size: 10px;text-align: center;">获得iPhone 6s 16g手机一部</h5>
      </div>
    </div>


		</div>
	

  <div class="fireSound">
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
  </div>

  <div class="music run">
    <audio src="http://music.163.com/song/media/outer/url?id=1487212156.mp3" loop></audio>
  </div>  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="./js/index.js?ver=1.0"></script>
  <script src="./js/zepto.min.js"></script>
<script src="./js/red.js"></script>
<script>
  function hoverTreeRandom(n) {
      return Math.floor(Math.random() * n + 1)
  }
  var hovertreePrize = new Array();
  hovertreePrize[0] = { "key": "恭喜您：", "value": "获得丞宝机器人定制话语的机会（私聊我）！" };
  hovertreePrize[1] = { "key": "恭喜您：", "value": "获得与范丞丞睡觉的机会（说说而已）" };
  hovertreePrize[2] = { "key": "恭喜您：", "value": "获得范丞丞自拍！（快去催）" };
  hovertreePrize[5] = { "key": "恭喜您：", "value": "获得一次范丞丞亲亲" };
  hovertreePrize[3] = { "key": "祝愿您：", "value": "笑口常开，天天开心！" };
  hovertreePrize[4] = { "key": "祝愿您：", "value": "心想事成，美梦成真！" };
  hovertreePrize[6] = { "key": "祝愿您：", "value": "事业顺利，财源滚滚！" };
  hovertreePrize[7] = { "key": "恭喜您：", "value": "获得无数次丞宝怼怼机会（请私信丞宝）" };
  hovertreePrize[8] = { "key": "恭喜您：", "value": "你提一个东西我来完成（咕咕）@帅气tianti" };
  var h_index = 0;
  document.getElementById("hovertreeOpen").addEventListener("click", function () {
      h_index = hoverTreeRandom(hovertreePrize.length)-1;
      document.getElementById("hwqKey").innerText = hovertreePrize[h_index].key;
      document.getElementById("hwqValue").innerText = hovertreePrize[h_index].value;
  })
</script>


    


 
</body>

</html>